<!--
* @description 巡检点位list
* @author zywu
* @date 2021/03/12 16:31:24
!-->
<template>
  <div class="inspect_all_List_zj">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="list-card"
        :immediate-check="false"
        :finished-text="listData.length>0?'暂无更多':''"
      >
        <van-cell class="inspect_all_List_zj_cell" v-for="(item) in listData" :key="item.id" @click="jumpdetail(item)">
           <van-row type="flex" align="center">
             <van-col span="16">
               <div class="inspect_all_List_zj_cell__left">
                 <span class="zj_cell_top">{{item.name}}</span>
                 <span class="zj_cell_bottom">{{item.buildLevelName +(item.address.length!=0?'>'+item.address:item.address)}}</span>
                  <div>
                    <i class="iconfont icon-dingweiweizhi" style="color: #2471CA;font-size: 14px;"></i>
                    <span class="inspect_all_List_zj_cell__unit">{{item.orgName}}</span>
                  </div>
               </div>
             </van-col>
             <van-col span="8">
               <img class="inspect_all_List_zj_cell__image" :src="item.picUrl || require('../../assets/img/inspect/default-point.png')" :onerror="defaultImg"  alt="">
             </van-col>
           </van-row>
        </van-cell>
      </van-list>
      <div
        style="display: flex;align-items: center;width: 100%;justify-content: center;"
        v-if="listData == null || listData.length == 0"
      >
        <img src="../../assets/img/inspect/inspect_null.png" alt style="width:70%;" />
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getExaminePointList} from '@/api/examine'
export default {
  computed: {
    ...mapState(['userInfo']),
  },
  props: {
    setOrgIds: String,
    setPoint: String,
    searchvalue: String,
    setClearall: Boolean
  },
  data() {
    return {
      defaultImg: 'this.src="' + require('../../assets/img/inspect/default-point.png') + '"',
      listData: [],
      loading: false,
      finished: false,
      refreshing: false,
      total: 0,
      params: {
        queryType: 1,
        pageIndex: 0,
        pageSize: 10,
        orgIds: '',
        queryContent: '',
        pointTypeId: ''
      }
    }
  },

  components: { },

  watch: {
    setClearall(value) {
      let that = this
      that.params.orgIds = this.userInfo.organizationIds
      that.params.pointTypeId = ''
      that.params.queryContent = ''
    },
    setOrgIds(value) {
      let that = this
      that.params.orgIds = value?value:this.userInfo.organizationIds
      that.onRefresh()
    },
    setPoint(value) {
      let that = this
      that.params.pointTypeId = value
      that.onRefresh()
    },
    searchvalue(value) {
      let that = this
      that.params.queryContent = value
      that.onRefresh()
    }
  },

  created() {
    this.params.orgIds = this.userInfo.isMuilUnitUser==1?this.userInfo.organizationIds:this.userInfo.org.id
  },

  mounted() {},

  activated() {
     this.onRefresh()
  },

  methods: {
    jumpdetail(item) {
      this.$router.push({
        name: 'InspectAllPointDetail',
        query: {
          Data: JSON.stringify(item)
        },
      })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false
      this.listData = []
      this.total = 0
      this.params.pageIndex = 0
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onLoad() {
      getExaminePointList(this.params).then((res) => {
        if (this.refreshing) {
          this.total = 0
          this.listData = []
          this.refreshing = false
        }
        this.loading = false
        if (res.data&&res.data.length==0) {
          this.finished = true
          return
        }
        this.listData = this.listData.concat(res.data)
        this.total = res.total
        if (this.listData.length >= this.total) {
          this.finished = true
        } else {
          this.params.pageIndex++
        }
      })
    }
  },
}
</script>
<style lang='scss'>
.van-cell::after {
  content: none;
}
.inspect_all_List_zj {
  .list-card {
    // padding: 0;
    padding-bottom: 20px;
  }
  .van-pull-refresh {
    padding: 0 15px;
  }
}
.inspect_all_List_zj_cell {
  box-shadow: 0px 2px 10px 2px rgba(181, 200, 206, 0.5);
  border-radius: 5px;
  margin-top: 10px;
  padding: 0;
  // height: 140px;
  background: white;
  &__image {
    width: 95%;
    height: 91px;
  }
  &__left {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px 17px;
  }
  &__unit {
        color: #999;
        margin-left: 5px;
      }
  .zj_cell_top {
    font-size: 16px;
    color: #333333;
  }
  .zj_cell_bottom {
    font-size: 14px;
    color: #999999;
    margin: 5px 0;
  }
}
</style>